<%@ page contentType="text/html;charset=iso-8859-1" language="java" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title><spring:message code="WEBTITLE"/></title>
    <%@ include file="../include/style.jsp" %>
    <%@ include file="../include/script.jsp" %>
    
    <script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/viewModel/home.viewmodel.js"></script>
	<script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/models/market-model.js"></script>
	<script type="text/javascript" src="<%=scriptPageContext %>/static/scripts/models/product-model.js"></script>
	
	<script type="text/javascript" src="<%=scriptPageContext %>/static/js/parallax/jquery.localscroll-1.2.7-min.js"></script>
	<script type="text/javascript" src="<%=scriptPageContext %>/static/js/parallax/jquery.parallax-1.1.3.js"></script>
	<script type="text/javascript" src="<%=scriptPageContext %>/static/js/parallax/jquery.scrollTo-1.4.2-min.js"></script>
    <script>
	    var highlightProducts = <%= request.getAttribute("highlightProducts") %>; 
	    var highlightMarkets = <%= request.getAttribute("highlightMarkets") %>;
    </script>
</head>
<body>

	<%@ include file="../include/top-public.jsp" %>

	<%@ include file="../include/homeBox.jsp" %>

	<div class="container" id="home-container">	

		<%--<div class="row slide visible-md visible-lg">
			<div class="col-sm-12 col-md-12">
				<%@ include file="../include/slide.jsp" 				
			</div>
		</div>--%>

		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12"><h3 class="title product"><i class="icon-shopping-cart"></i> <spring:message code="PRODUCTS"/></h3></div>
		</div>

		<div class="row">
			<div class="col-md-12 allItems">
				<div class="listItems">
					<!-- mover este ul, el margin-left en +287px ó -287px -->
					<ul id="productsHomeUl" style="margin-left: -574px">
						<div data-bind="template: { name: 'homeProduct-template', foreach: products, afterRender: showProducts }"></div>
						<script type="text/html" id="homeProduct-template">
							<%@ include file="../templates/homeProduct-template.jsp" %>
						</script>
					</ul>
				</div>

				<nav class="jms-arrows">
					<span class="jms-arrows-prev" data-bind="click: moveProductLeft"></span>
					<span class="jms-arrows-next" data-bind="click: moveProductRight"></span>
				</nav>
			</div>
		</div>
		
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12"><h3 class="title store"><i class="ico-shop"></i> <spring:message code="MARKETS"/></h3></div>
		</div>

		<div class="row">
			<div data-bind="template: { name: 'market-template', foreach: markets, afterRender: showMarkets}"></div>
			<script type="text/html" id="market-template">
				<%@ include file="../templates/market-template.jsp" %>
			</script>
		</div>

		<div class="row socialMedia">
			<div class="col-xs-12 col-sm-12 col-md-12">
				<a href="javascript:void(0)" onclick="redirect('howTo');" class="link create">
					<i class="icon-circle-arrow-up icon-4x"></i>
	        		<span><spring:message code="HOW_CREATE"/></span>
	        	</a>
			</div>
		</div>
		
		<div class="row socialMedia" style="display: none;">
			<div class="col-xs-12 col-sm-6 col-md-3">
				<a href="/comunidad" class="link blog">
					<i class="icon-list icon-4x"></i>
	        		<span><spring:message code="COMMUNITY"/></span>
	        	</a>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-3">
				<a href="http://www.dondereciclo.org.ar/" class="link recycle" target="_blank">
					<i class="icon-refresh icon-4x"></i>
	        		<span><spring:message code="WHERE_RECYCLE"/></span>
	        	</a>
			</div>
			<div class="col-xs-12 col-sm-6 col-md-3">
				<a href="javascript:void(0)" onclick="redirect('howTo');" class="link create">
					<i class="icon-circle-arrow-up icon-4x"></i>
	        		<span><spring:message code="HOW_CREATE"/></span>
	        	</a>
			</div>		
		</div>
		
		<%@ include file="../include/footer.jsp" %>
		
	</div>
	<!-- MODAL -->
		<%@ include file="../templates/popins/successOperation.jsp" %>
	<!-- end MODAL -->
</body>
</html>